import { createBehavior, createResource } from '@inbiz/core';
import {
  createComponentStyleSchema,
  createInbizSchema,
  createBizStyleSchema,
  createDecoratorStyleSchema,
} from '@inbiz/setters';
import { Text as LocaleText } from './locale';

export const defaultProps = {
  headerStyle: {
    icon: {
      type: 'icon-changwenben',
    },
  },
  style: {
    padding: '0px 20px 0px 20px',
  },
  text: '欢迎使用inbiz文本组件',
  color: 'rgba(60,60,60,1)',
  fontSize: 16,
  textIndent: 0,
  lineHeight: 1.8,
  textAlign: 'left',
};

export const Text = createInbizSchema({
  attribute: {
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            text: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input.TextArea',
            },
            color: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
            },
            fontSize: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
              },
            },
            textIndent: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 0,
              },
            },
            textAlign: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['left', 'center', 'right'],
            },
            lineHeight: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 0,
              },
            },
          },
        },
      },
    },
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema(
        {
          icon: {
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': 'IconPicker',
          },
        },
        {},
      ),
    }),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'Text',
  selector: (node: any) => node?.props['x-component'] === 'Text',
  designerLocales: LocaleText,
  designerProps: {
    propsSchema: Text,
  },
});

export const Resource = createResource({
  icon: 'Text',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'Text.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'Text',
        'x-component-props': defaultProps,
      },
    },
  ],
});
